<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>事件处理</title>
	</head>
	<body>
		<div id="root"></div>

		<script
			type="text/javascript"
			src="./components/react.development.js"
		></script>
		<script
			type="text/javascript"
			src="./components/react-dom.development.js"
		></script>
		<script type="text/javascript" src="./components/babel.min.js"></script>

		<script type="text/babel">
			/*
      事件处理
      React 元素的事件处理和 DOM 元素的很相似，但是有一点语法上的不同：

      React 事件的命名采用小驼峰式（camelCase），而不是纯小写。
      使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。

      在react中:
      <button onClick={activateLasers}>Activate Lasers</button>        
    */

      // 阻止默认行为
      function ActionLink () {
        function handleClick (e) {
          e.preventDefault();
          console.log('The link was clicked.');
        }

        return (
          <a href="#" onClick={handleClick}>Click me</a>
        )
      }

      ReactDOM.render(
        <ActionLink />,
        document.getElementById('root')
      )

      
		</script>
	</body>
</html>
